<template>
  <v-container fluid>
    <v-flex xs12>
      <v-card class="grey lighten-4 elevation-0">
        <v-card-title>
          {{title}}
          <v-spacer></v-spacer>
          <v-btn floating small class="grey" @click.native="cancel()">
            <v-icon light>取消</v-icon>
          </v-btn>
          &nbsp;
          <v-btn floating small class="purple" @click.native="save()">
            <v-icon light>保存</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <v-container fluid>
            <v-layout row wrap>
              <v-flex md4 xs12>
                <v-text-field name="card_no" label="卡号" hint="卡号不能为空" value="" v-model="customer.card_no" class="input-group--focused"></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="name" label="姓名" maxlength="10" hint="姓名不可为空" value="Input text" v-model="customer.name" class="input-group--focused" required></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-select
                  v-bind:items="gender"
                  name="gender"
                  label="性别"
                  v-model="customer.gender"
                  class="input-group--focused"
                  ></v-select>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="age" type="number" label="年龄" hint="" v-bind:rules="rules.age"
                 v-model="customer.age" class="input-group--focused" required></v-text-field>
              </v-flex>
              <v-flex md4 xs12>
                <v-text-field name="phone" type="email" label="手机号" value="Input text" v-model="customer.phone"
                 v-bind:rules="rules.phone" class="input-group--focused" required></v-text-field>
              </v-flex>
               <v-flex md4 xs12>
                  <v-text-field name="remark" label="备注" v-model="customer.remark" class="input-group--focused"></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
      </v-card>
    </v-flex>
  </v-container>
</template>
<script>
export default {
  data: function () {
    return {
      errors: [],
      title: '',
      customer: {},
      rules: {
//        age: [() => {
//          if (this.customer.age < 18 || this.customer.age > 100) return 'Age is required. It must be bewteen 18 and 100'
//        }],
//        email: [() => {
//          if (this.customer.email) {
//            /* eslint-disable no-useless-escape */
//            let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
//            if (!re.test(this.customer.email)) return 'Email is invalid.'
//          }
//        }]
      }
    }
  },
  computed: {
  },
  methods: {
    save: function () {
      let customer = this.customer
      if (!customer.id) {
        this.api.postData('customer', customer).then((res) => {
          this.$router.push({name: 'Customers'})
        }, (err) => {
          console.log(err)
        })
      } else {
        this.api.putData('customer/' + customer.id.toString(), customer).then((res) => {
          this.$router.push({name: 'Customers'})
        }, (err) => {
          console.log(err)
        })
      }
    },
    getById: function () {
      this.api.getData('customer/' + this.$route.params.id).then((res) => {
        this.customer = res.data[0]
        console.log('get it', this.customer)
        // this.customer.avatar = '/assets/' + this.customer.avatar
      }, (err) => {
        console.log(err)
      })
    },
    cancel: function () {
      this.$router.push({name: 'Customers'})
    }
  },
  mounted: function () {
    this.gender = ['男', '女']
    if (this.$route.params.id) {
      this.getById()
      console.log(this.customer)
      this.title = '编辑会员'
    } else this.title = '新增会员'
  }
}
</script>
